<template>
	<view class="page">
		<xzfx-empty v-if="list.length === 0" tips="暂无数据" />
		<view class="withdrawal-unsettled page-panel" v-for="(item,index) in list" :key="index">
			<view class="top">
				<view class="number">
					订单编码:
					<text>{{ item.orderNo }}</text>
				</view>
				<view class="state">已提现</view>
			</view>
			<view class="body">
				<view class="info">
					<view class="info-item">
						货物信息：
						<text>
							{{ item.goodsType || '其他' }}
							<text>|</text>
							{{ item.goodsVolume || 0 }}m³
							<text>|</text>
							{{ item.goodsWeight || 0 }}kg
						</text>
					</view>
					<view class="info-item">提现时间：<text>{{ item.txTime || "" }}</text></view>
				</view>
				<view class="money" style="color: #333333;"><text>¥</text>{{ item.orderPrice }}</view>
			</view>
		</view>
		<xzfx-divider v-if="list.length > 10">{{ dividerTitle }}</xzfx-divider>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				dividerTitle: "暂无更多"
			};
		},
		onLoad(e) {
			this.$utils.system.loading("加载中，请稍后");
			this.dividerTitle = "加载中......"
			this.$apis.withdrawal.historyDetail({
				id: e.id
			}).then(res => {
				this.dividerTitle = "暂无更多"
				this.list = res.items
			}).catch(err => {
				console.log(err)
				this.dividerTitle = "暂无更多";
			}).finally(() => {
				uni.hideLoading();
			});
		}
	}
</script>

<style scoped lang="scss">
	.page{
		min-height: 100vh;
		.page-panel{
			margin: $xzfx-spacing;
			background-color: #fff;
			padding: $xzfx-spacing;
			border-radius: 20rpx;
		}
		.withdrawal-wait,
		.withdrawal-unsettled{
			
			.top{
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #f1f1f1;
				padding-bottom: $xzfx-spacing;
				margin-bottom: $xzfx-spacing;
				.number{
					color: #666666;
					text{
						color: #333333;
						margin-left: 10rpx;
					}
				}
				.state{
					color:  #999999;
					font-size: 28rpx;
				}
			}
			.body{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.select{
					width: 60rpx;
					height: 60rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #999999;
					font-size: 38rpx;
				}
				.xzfx_icon_radio_fill{
					color: $xzfx-theme;
				}
				.info{
					width: calc(100% - 210rpx);
					padding-left: 10rpx;
					background: linear-gradient(to right, #f1f4fa, #ffffff);
					padding: 20rpx;
					border-radius: 10rpx;
					.info-item{
						font-size: 26rpx;
						color: #999999;
						text:only-child{
							text{
								padding: 0 10rpx;
								font-size: 22rpx;
								color: #999999;
							}
						}
					}
				}
				.money{
					width: 150rpx;
					text-align: right;
					color: #EA4070;
					font-size: 38rpx;
					font-weight: bold;
					text{
						font-size: 28rpx;
						margin-right: 5rpx;
					}
				}
			}
			
		}
		.withdrawal-history{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.time{
				font-size: 32rpx;
				color: #666666;
			}
			.money{
				width: 150rpx;
				text-align: right;
				color: #EA4070;
				font-size: 38rpx;
				font-weight: bold;
				text{
					font-size: 28rpx;
					margin-right: 5rpx;
				}
			}
		}
		.action{
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 2;
			width: 100%;
			height: 120rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 $xzfx-spacing;
			border-top: 1rpx solid #f1f1f1;
			.btn{
				width: 100%;
				height: 80rpx;
				border-radius: 40rpx;
				color: #fff;
				background-color: $xzfx-theme;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.page-nav{
			margin: $xzfx-spacing;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.title{
				position: relative;
				display: inline-block;
				font-size: 34rpx;
				font-weight: bold;
				color: #333;
				.panel-sub-name{
					font-size: 26rpx;
					font-weight: 500;
					margin-left: 10rpx;
					color: #999999;
				}
			}
			.title::after{
				position: absolute;
				bottom: 0;
				left: 0;
				content: "";
				width: 100%;
				height: 8rpx;
				border-radius: 8rpx;
				background: linear-gradient(90deg, #EA4070 0%, rgba(234,64,112,0.46) 100%);
			}
			.btn{
				height: 60rpx;
				display: inline-flex;
				align-items: center;
				background-color: #fff;
				border-radius: 30rpx;
				color: #666666;
				font-size: 26rpx;
				text{
					color: #999999;
					margin-left: 8rpx;
					font-size: 20rpx;
				}
			}
		}
		
	}
</style>
